<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>角色属性界面</title>
  <link rel="stylesheet" href="./character.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
  <div class="char-tabs" role="tablist" aria-label="角色页签">
    <button class="tab active" role="tab">装备</button>
    <button class="tab" role="tab">时装</button>
    <button class="tab" role="tab">荣耀</button>
    <button class="tab" role="tab">贡献</button>
    <button class="tab" role="tab">竞技</button>
  </div>

  <div class="char-screen">
    <div class="char-panel">
      <div class="equip-column left" aria-label="左侧装备">
        <div class="equip-slot" data-slot="head-ornament" aria-label="头饰"></div>
        <div class="equip-slot" data-slot="helmet" aria-label="头盔"></div>
        <div class="equip-slot" data-slot="necklace" aria-label="项链"></div>
        <div class="equip-slot" data-slot="armor" aria-label="上衣"></div>
        <div class="equip-slot" data-slot="weapon" aria-label="武器"></div>
      </div>

      <div class="char-portrait" aria-label="人物缩略图">
        <div class="portrait-frame">
          <div class="portrait-img" role="img" aria-label="角色头像"></div>
        </div>
      </div>

      <div class="equip-column right" aria-label="右侧装备">
        <div class="equip-slot" data-slot="belt" aria-label="腰带"></div>
        <div class="equip-slot" data-slot="ring" aria-label="戒指"></div>
        <div class="equip-slot" data-slot="gloves" aria-label="手套"></div>
        <div class="equip-slot" data-slot="pants" aria-label="裤子"></div>
        <div class="equip-slot" data-slot="boots" aria-label="鞋子"></div>
      </div>
    </div>

    <aside class="attr-panel" aria-label="人物属性">
      <div class="attr-side-list" aria-label="侧栏图标">
        <div class="attr-slot rarity-epic"></div>
        <div class="attr-slot rarity-rare"></div>
        <div class="attr-slot rarity-uncommon"></div>
        <div class="attr-slot rarity-rare"></div>
        <div class="attr-slot rarity-common"></div>
        <div class="attr-slot rarity-rare"></div>
        <div class="attr-slot rarity-uncommon"></div>
        <div class="attr-slot rarity-epic"></div>
      </div>
      <section class="attr-section">
        <h2>战斗属性</h2>
        <ul>
          <li><span class="label">物理攻击</span><span class="value" id="attr-phys-atk">0</span></li>
          <li><span class="label">法术攻击</span><span class="value" id="attr-magic-atk">0</span></li>
          <li><span class="label">伤害强度</span><span class="value" id="attr-damage-power">0.0</span></li>
          <li><span class="label">防御值</span><span class="value" id="attr-defense">0</span></li>
          <li><span class="label">全抗性</span><span class="value" id="attr-resist">0</span></li>
        </ul>
      </section>
      <section class="attr-section">
        <h2>基础属性</h2>
        <ul>
          <li><span class="label">体力</span><span class="value" id="attr-vitality">0</span></li>
          <li><span class="label">力量</span><span class="value" id="attr-strength">0</span></li>
          <li><span class="label">敏捷</span><span class="value" id="attr-agility">0</span></li>
          <li><span class="label">智力</span><span class="value" id="attr-intelligence">0</span></li>
          <li><span class="label">精神</span><span class="value" id="attr-spirit">0</span></li>
        </ul>
      </section>
      <section class="attr-section">
        <h2>战术属性</h2>
        <ul>
          <li><span class="label">暴击率</span><span class="value" id="attr-crit">0%</span></li>
          <li><span class="label">命中率</span><span class="value" id="attr-hit">0%</span></li>
          <li><span class="label">格挡率</span><span class="value" id="attr-block">0%</span></li>
          <li><span class="label">闪避率</span><span class="value" id="attr-dodge">0%</span></li>
        </ul>
      </section>
    </aside>
  </div>

  <div class="char-footer">
    <button class="foot-arrow" aria-label="上一位"></button>
    <div class="foot-plaque">门派排名  百名之外</div>
    <button class="foot-arrow right" aria-label="下一位"></button>
  </div>

  <script src="./character.js"></script>
</body>
</html>


